import './public-path.js'
import Vue from 'vue';
import App from './App.vue'
import VueRouter from 'vue-router'
// import store from './store'
import routes from "./router/index"

// new Vue({
//   router,
//   render: h => h(App),
// }).$mount('#app')

Vue.use(VueRouter);
Vue.config.productionTip = false;

let instance = null;
let router = null;
function render(props = {}) {
    const { container, appContent } = props;

    // 在 render 中创建 VueRouter，可以保证在卸载微应用时，移除 location 事件监听，防止事件污染
    router = new VueRouter({
        // 运行在主应用中时，添加路由命名空间 /vue
        base: window.__POWERED_BY_QIANKUN__ ? "/vue" : "/",
        mode: "history",
        routes,
    });

    instance = new Vue({
        router,
        data() {
            return {
                content: appContent
            }
        },
        render(h) {
            return h(App, {
                props: {
                    content: this.content
                }
            })
        }
    }).$mount(container ? container.querySelector('#containerVue') : '#containerVue');  // 为了避免根id#app与其他DOM冲突，需要限制查找范围
}

if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

//--------- 生命周期函数------------//
/** 
* 新增： 
* bootstrap 只会在微应用初始化的时候调用一次，
  下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。 
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。 
*/
export async function bootstrap() {
    console.log('[vue] vue app bootstraped');
}
/** 
* 新增： 
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法 
*/
export async function mount(props) {
    const { name } = props;
    console.log('主应用的name:', name);
    console.log('[vue] props from main framework', props);
    render(props);
}
/** 
* 新增： 
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例 
*/
export async function unmount() {
    //   store.dispatch('authorization/microUnApp')
    // console.log('切出或卸载调用')
    instance.$destroy();
    instance.$el.innerHTML = '';
    instance = null;
    router = null;
}
// 新增：独立运行时，直接挂载应用
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

